【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

在使用Vue的時候，如果我們想將data中的資料顯示在畫面上
通常會使用v-text和{{　}} (Mustache)這兩種方法
範例：https://codepen.io/linchinhsuan/pen/GRyVoYv

v-text和{{　}} (Mustache)所得到的結果都是一樣的，即將data內對應的內容渲染到畫面上

  <p>{{ message }}</p>
  <p v-text="message"></p>

在這個案例中，我們將data內的message分別以兩種不同的方式渲染到畫面上

v-html

v-html與v-text和{{　}} (Mustache)不同
他可以直接渲染HTML標籤
範例：https://codepen.io/linchinhsuan/pen/LYewGaR

在這個案例中我們可以看到
當data內的值為HTML格式的時候
v-text和{{　}} (Mustache)會將其渲染成純字串
而v-html則能夠正確的顯示HTML結構

但也正因如此，如果隨意使用容易導致XSS攻擊

{{　}} (Mustache)內是表達式

{{　}} (Mustache)內的內容，其實就是一個表達式
因此，只要是表達式都可以放進來
例如：

{{ 1 + 1 }}
{{ `樣板字面值 ${變數}` }}
{{ fn(a, b) }}
{{ isNew ? "新的" : "舊的" }}

......等等，只要是JavaScript的表達式，基本上都可以放入{{　}} (Mustache)中
並且最終會將其回傳的結果顯示在畫面上
例如{{ 1 + 1 }}就會顯示 2 而非直接把 1 + 1 印在畫面上